<html>
<head>
    <title></title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/icamera/headtrackr.min.js" type="text/javascript"></script>
    <script src="js/icamera/icamera.js" type="text/javascript"></script>
    <!--<script src="js/jq-test1.js" type="text/javascript"></script>-->
    <script src="js/test1.js" type="text/javascript"></script>
    <script type="text/javascript">
        console.log("11");
        // Put event listeners into place
        window.addEventListener("DOMContentLoaded", function () {
            registVideo("video1", "canvas");

            // Trigger photo take
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var video1 = document.getElementById("video1");
            document.getElementById("snap").addEventListener("click", function () {
                $('#img_test').attr('src', canvas.toDataURL('image/jpeg', 50));
                context.drawImage(video1, 0, 0, 640, 480);
            });
            //var htracker = new headtrackr.Tracker();
            //htracker.init(video1, canvas);
            //htracker.start();
            //f_head();
            //f_test();
            update();
        }, false);

        function f_face() {
            document.addEventListener('facetrackingEvent', function (event) {
                console.log("hello hjd " + event.x + " " + event.y + " " + event.width + " " + event.height);
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext('2d');
                context.beginPath();
                var modifyW = event.width * 0.8;
                var modifyH = event.height * 0.8;
                var startX = event.x - modifyW / 2;
                var startY = event.y - modifyH / 2;
                context.moveTo(startX, startY);
                context.lineTo(startX + modifyW, startY);
                context.lineTo(startX + modifyW, startY + modifyH);
                context.lineTo(startX, startY + modifyH);
                context.lineTo(startX, startY);
                context.stroke();

            }, false);
        }

        function f_head() {
            document.addEventListener('headtrackingEvent', function (event) {
                console.log("hello hjd " + event.x + " " + event.y + " ");
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext('2d');
                context.beginPath();
                var modifyW = 5 * 0.8;
                var modifyH = 5 * 0.8;
                var startX = event.x - modifyW / 2;
                var startY = event.y - modifyH / 2;
                context.moveTo(startX, startY);
                context.lineTo(startX + modifyW, startY);
                context.lineTo(startX + modifyW, startY + modifyH);
                context.lineTo(startX, startY + modifyH);
                context.lineTo(startX, startY);
                context.stroke();

            }, false);
        }

        function f_test() {
            var tool = new myTool("", {
                a: 5,
                init_callback: function () {
                    console.log("init success!");
                }
            });
            console.log(tool.getA());
        }
        
    </script>
</head>
<body>
    <div id="contentHolder">
        <video id="video1" width="640" autoplay></video>
        <button id="snap" class="sexyButton">
            Snap Photo</button>
        <canvas id="canvas" width="640" height="480"></canvas>
        <canvas id="canvasSource" width="640" height="480"></canvas>
        <canvas id="canvasBlended" width="640" height="480"></canvas>
       
    </div>
</body>
</html>
